<template>
<div>
    <ElDialog
        ref="dialog"
        v-model="dialogParm.show"
        :title="dialogParm.title"
        :width="dialogParm.width"
        :center="dialogParm.isCenter"
        :before-close="close"
        :close-on-click-modal="false"
        custom-class="custom-dialog"
        :append-to-body="dialogParm.append"
        :open-delay="dialogParm.openDelay.flag ? dialogParm.openDelay.time : 0"
    >
        <slot></slot>
        <template #footer v-if="dialogParm.showButton">
            <div>
                <!-- 额外的dialog按钮 -->
                <slot name="footer-btn"></slot>
                <el-button v-if="dialogParm.hasCancel" @click="close">{{dialogParm.cancelText}}</el-button>
                <el-button v-if="dialogParm.hasOk" type="primary" @click="confirm">{{dialogParm.okText}}</el-button>
            </div>
        </template>
    </ElDialog>
</div>
</template>
 
<script >
import { defineComponent, watch, reactive, toRefs} from 'vue';
export default defineComponent({
    props: {
        layer: {
            type: Object,
            default: () => {
                return {}
            },
            required: true
        }
    },
    emits: ['confirm', 'update:visible', 'close'],
    setup(props, ctx) {
        // 状态数据
        const state = reactive({
            // 弹窗默认配置项
            defaultOptions: {
                show: false, // 弹窗显示控制
                title: '', // dialog标题
                showButton: true, // 是否显示footer
                isCenter: false, // 按钮是否居中
                okText: '确认', // 确认按钮文案
                cancelText: '取消', // 取消按钮文案
                append: false, // 是否添加到body中，嵌套的dialog需设置为true
                hasOk: true, // 是否有确认按钮
                hasCancel: true, // 是否有取消按钮
                openDelay: { // 打开dialog的延迟
                    flag: true, // 是否启用打开延迟 ，true 开启，false 不开启，默认开启
                    time: 100 // 延迟时间，毫秒
                }
            }
        })
        watch(() => props.layer, (n, o) => {
            state.dialogParm = Object.assign(state.defaultOptions, n)
        }, {
            deep: true,
            immediate: true
        })
        // 确认操作
        function confirm() {
            ctx.emit('confirm');
        }
        // 取消操作
        function close(done) {
            typeof done === 'function' && done()
            ctx.emit('update:visible', false)
            ctx.emit('close')
        }
        
        return {
            confirm,
            close,
            ...toRefs(state)
        };
    }
});
</script>
 
<style lang="scss" scoped></style>